<template>
    <div class="container">

        <template v-for="(selectedTeacher, index) in selectedTeacherList" :key="selectedTeacher.rid">
            <el-card shadow="hover" class="item">
                <el-descriptions title="已选课程信息" direction="vertical" border style="margin-top: 20px">
                    <el-descriptions-item :rowspan="2" :width="150" label="照片" align="center">
                        <el-image style="width: 150px; height: 110px"
                            :src="'http://localhost:8080/upload/' + selectedTeacher.tavatar" />
                    </el-descriptions-item>
                    <el-descriptions-item label="姓名">{{ selectedTeacher.tname }}</el-descriptions-item>
                    <el-descriptions-item label="课程">
                        <el-tag size="small">{{ selectedTeacher.course.cname }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="编号">{{ selectedTeacher.course.cno }}</el-descriptions-item>
                    <el-descriptions-item label="进度">{{ selectedTeacher.course.cperiod }} </el-descriptions-item>
                    <el-descriptions-item label="不做无法实现的梦">
                        No.1188 Shandong Institute of Petroleum and Chemical Technology
                    </el-descriptions-item>
                    <el-descriptions-item label="介绍">{{ selectedTeacher.course.cinfo }}</el-descriptions-item>
                    <el-descriptions-item label="开始时间">{{ selectedTeacher.course.ctime }}</el-descriptions-item>
                </el-descriptions>
            </el-card>
        </template>
    </div>
</template>


<script setup>
import studentOpreateApi from '@/api/studentOpreateApi ';
import { onMounted, reactive, watch, ref, onBeforeUnmount, shallowRef } from 'vue'


const selectedTeacherList = ref('');//已选择的老师课程信息

const studentInformation = ref('')//学生个人信息

//查询学生个人信息
function selectStudent() {
    studentOpreateApi.studentLoginInfo()
        .then(resp => {
            console.log(resp.data);
            studentInformation.value = resp.data;
            studentOpreateApi.selectedTeacherAndCourse(studentInformation.value.sno)
                .then(resp => {
                    console.log(resp.data);
                    selectedTeacherList.value=resp.data[0].teachs
                })
        })
}
selectStudent()


</script>

<style scoped>
.container {
    display: flex;
    flex-wrap: wrap;
    /* 允许子项换行 */
    justify-content: space-between;
    /* 在主轴上分配空间 */
    padding: 10px;
    /* 容器内边距 */
    width: 100%;

}

.item {
    flex-basis: 32.3333%;
    /* 子项基础宽度为容器的三分之一 */
    box-sizing: border-box;
    /* 包括内边距和边框在计算宽度内 */
    padding: 10px;
    /* 子项内边距 */
    margin-bottom: 20px;
    text-align: center;
    /* 文本居中 */
}
</style>
